iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
自我挑戰組

從零開始的後端異世界生活系列 第 24

Day 24 - 在 NestJS 中實作 JWT 與 AuthModule (3)

  • 分享至 

  • xImage
  •  

新增 JwtStrategy

再來我們要利用 Passport 來進行相關驗證工作,先在 Auth 資料夾底下新增一個 JwtStrategy
https://ithelp.ithome.com.tw/upload/images/20201009/20119619IWlWDBS7s7.png

並在 constructor 的地方撰寫 Strategy 設定,例如,從 Request 拿到 Jwt:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619rMCCPV6UoQ.png

新增 secretOrKey(跟 AuthModule 設定的一樣):
https://ithelp.ithome.com.tw/upload/images/20201009/2011961958Y9pBWGOP.png

撰寫 JwtStrategy validate

再來我們要撰寫一個方法,讓 Passport verify 這個 Jwt 之後如果是 valid 的話,就做這個 function 裡面的事(若是 verify 沒通過則會 throw error),那它接收的參數是 payload:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619FYBMD2ttxh.png

不過型別是 any 好像不太好,我們可以新增一個 interface 叫 JwtPayload:
https://ithelp.ithome.com.tw/upload/images/20201009/201196196EuyD3u5qh.png

然後讓 payload 都是這種型別:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619qEsCUMMsV5.png

https://ithelp.ithome.com.tw/upload/images/20201009/20119619EVKjAqYwXY.png

之後我們來撰寫 validate 方法裡面的邏輯,我們在驗證 Jwt 成功之後想做的事情是「拿到這個 User」,而且我們在 payload 裡面有 userId 這個 sub,可以用來查詢到該 User,那我們先將 UserRepository 給注入進來:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619kDhQyj1hjm.png

然後在 valiadte 裡查詢這個 User 並 return:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619gUTzMNAH36.png

若要讓程式碼更好看,可以在 return 加上:
https://ithelp.ithome.com.tw/upload/images/20201009/2011961993zi5G8eQD.png

試試看 JwtStrategy 前置

完成了以上步驟之後,我們馬上來試看看現在撰寫的有沒有用,我們用新增任務那支 API 來做測試,先在 controller 這邊加上 AuthGuard:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619GHDKPG5UuQ.png

運行之後會有錯誤,它提示你如果要用 defaultStrategy,要記得 import PassportModule,由於我們的 Apiv1Moudle 本來就有 import AuthModule,故只要在 export 的地方加上 PassportModule
https://ithelp.ithome.com.tw/upload/images/20201009/20119619km0Od2mNQ8.png

然後我們也要記得把 JwtStrategy 給放進 provider 與 export:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619YC3ccbEiWF.png

運行之後還是有錯,因為我們忘記把 TypeOrm 的 ForFeature 在 AuthModule 給引入:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619TJExRuwPoz.png

(每個要用到 Entity 的地方都要引入 ForFeature,之後可以優化,不然每次新增資料表使用的時候,忘記新增到那裡都會報錯)

試試看 JwtStrategy

做完前置之後,雖然我們還沒調整新增任務的邏輯,但只是要測試 JwtStrategy 有沒有成功擋住而已。
試著打這支 API 看看:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619QHnZ3vQ6p6.png

然後我們就得到了 401:
https://ithelp.ithome.com.tw/upload/images/20201009/20119619cRPYwnJq87.png

OK,這樣基礎配置 JwtStrategy 就完成了,下一篇章我們來優化帶入 User 的部分。

/*
本系列文係個人新手開發心得,可能會有許多錯誤,煩請多多包容不吝指教。
*/


上一篇
Day 23 - 在 NestJS 中實作 JWT 與 AuthModule (2)
下一篇
Day 25 - 在 NestJS 中實作 JWT 與 AuthModule (4)
系列文
從零開始的後端異世界生活30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言